<script lang="ts" setup>
import {DishClass} from "@/Game/Dish";
import {useAppStore} from "@/stores/app";

const appStore = useAppStore();
const dishCountChanged = ref(false);

const {
    dish,
    dishCount
} = defineProps<{
    dish: DishClass,
    dishCount: number[],
    enabled: boolean
}>();

const dishClass = dish.Class;

watch(() => dishCount[dishClass], async (newCount, oldCount) => {
    if (newCount < oldCount) {
        dishCountChanged.value = true;
        setTimeout(() => {
            dishCountChanged.value = false;
        }, 1201);
    }
});
</script>

<template>
    <v-card :class="dishCountChanged ? 'cardRotateX' : ''" :color="dish.Color" :hover="enabled" :link="enabled" :title="`${dish.Icon} ${dish.Name}`">
        <template v-slot:append>
            {{dish.Price}}🪙
        </template>
        <v-card-text>
            <div :style="{fontSize: appStore.wideScreen ? '1.2rem' : '1rem'}" style="display: flex; align-items: center;">
                <span style="font-size: 0.875rem;">剩余: {{dishCount[dishClass]}}</span>
                <v-spacer/>
                <div style="display: flex; align-items: center;">
                    <div style="font-size: 0.875rem;">收入:</div>
                    <div style="letter-spacing: -0.2rem;">
                        <template v-for="item in dish.DirectIncome" :key="item">🪙</template>
                    </div>
                    <div v-if="dish.RandomIncome">+🎲</div>
                </div>
            </div>
        </v-card-text>
    </v-card>
</template>